<template>
  <div class="login-container">
    <!-- 左侧插画 -->
    <div class="illustration-section">
      <img :src="logoImage" alt="医护关怀插画" class="illustration-image">
    </div>

    <!-- 右侧登录表单 -->
    <div class="form-section">
      <el-form
          ref="loginForm"
          :model="userLoginData"
          :rules="formRules"
          @submit.native.prevent="userLogin"
      >
        <div class="form-header">
          <h1 class="title">欢迎登录</h1>
          <p class="subtitle">养老服务整合平台</p>
        </div>

        <!-- 账号输入 -->
        <el-form-item prop="username">
          <el-input
              v-model="userLoginData.username"
              placeholder="请输入账号"
              prefix-icon="User"
              autocomplete="username"
          />
        </el-form-item>

        <!-- 密码输入 -->
        <el-form-item prop="password">
          <el-input
              v-model="userLoginData.password"
              type="password"
              placeholder="请输入密码"
              prefix-icon="Lock"
              autocomplete="current-password"
              show-password
          />
        </el-form-item>

        <!-- 角色选择 -->
        <el-form-item prop="role">
          <el-select
              v-model="userLoginData.role"
              placeholder="请选择用户角色"
              @change="updateUserRoleDisplay"
              class="role-selector"
          >
            <el-option label="管理员" value="管理员"/>
            <el-option label="普通用户" value="普通用户"/>
          </el-select>
        </el-form-item>

        <!-- 操作区域 -->
        <div class="form-actions">
          <el-checkbox v-model="userLoginData.isRemember">记住密码</el-checkbox>
          <el-link type="primary" @click="goToResetPassword">忘记密码?</el-link>
        </div>

        <!-- 登录按钮 -->
        <div class="login_btn">
          <el-button
              native-type="submit"
              type="primary"
              class="login-btn">
            立即登录
          </el-button>
        </div>


        <!-- 注册链接 -->
        <div class="register-tip">
          <div class="ac">还没有账号?</div>
          <div class="reg">
            <el-link type="primary" @click="goToRegister">立即注册</el-link>
          </div>
        </div>

      </el-form>
    </div>
  </div>

  <!-- 备案号信息 -->
  <div class="footer">
    <div>社区养老服务整合平台</div>
  </div>
</template>

<script>
import {defineComponent, ref} from 'vue'
import {ElMessage} from 'element-plus'
import {login} from '../service/userApi.js'
import router from '../router/index.js'
import {useStore} from 'vuex'
import store from "../store/index.js";
import logoImage from '@/assets/images/logo-bac.png' // 路径优化


export default defineComponent({
  setup() {
    // 在setup中添加
    const store = useStore()

    const userLoginData = ref({
      username: '',
      password: '',
      role: '',
      isRemember: ''
    })

    const rememberMe = ref(false)
    const loginForm = ref(null)
    const userRoleDisplay = ref('')

    const formRules = {
      username: [{required: true, message: '请输入账号', trigger: 'blur'}],
      password: [{required: true, message: '请输入密码', trigger: 'blur'}],
      role: [{required: true, message: '请选择用户角色', trigger: 'change'}]
    }

    const goToRegister = () => {
      router.push('/register')
    }
    const goToResetPassword = () => {
      router.push('/resetPassword')
    }
    const updateUserRoleDisplay = () => {
      userRoleDisplay.value = userLoginData.value.role
    }

    const userLogin = async () => {
      await loginForm.value.validate()

      const response = await login(userLoginData.value)
      const token = response.data.tokenValue
      const role = userLoginData.value.role
      // 替换原来的 localStorage 操作
      await store.dispatch('loginSuccess', {token, role}) // 使用 Vuex action
      ElMessage.success('登录成功！')
      if (role === '管理员') {
        store.commit('setAdminRole');
      } else {
        store.commit('setClientRole');
      }
      const targetRoute = userLoginData.value.role === '管理员'
          ? '/system'
          : '/client'
      console.log('即将跳转到目标路由：', targetRoute)
      await router.push(targetRoute)
    }
    return {
      userLoginData,
      rememberMe,
      loginForm,
      formRules,
      goToResetPassword,
      goToRegister,
      updateUserRoleDisplay,
      userLogin,
      logoImage
    }
  }
})
</script>

<style scoped lang="scss">
.login-container {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100%;
  background: linear-gradient(to bottom, #fff, #D2B48C);
  display: flex;
  justify-content: center;
  align-items: center;

  .illustration-section {
    display: flex;
    align-items: center;
    justify-content: flex-end; // 右对齐插画
    padding-right: 4rem;
    // width: 30%;

    .illustration-image {
      max-height: 70vh;
      width: 100%;
      border-radius: 12px;
    }
  }

  .form-section {
    display: flex;
    align-items: center;
    // place-items: center;
    // margin-top: 12%;
    padding-left: 6rem;


    width: 35%;
    max-width: 400px; // 限制最大宽度
    height: 78%;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);

    .form-header {
      margin-top: -100px;
      text-align: center;
      margin-bottom: 30px;

      .title {
        font-size: 24px;
        color: #333;
        margin-bottom: 8px;
      }

      .subtitle {
        color: #666;
        font-size: 14px;
        margin-bottom: -10px;
      }
    }
  }

  .login_btn {
    margin-top: 15px;
    margin-bottom: 10px;
  }


  .login-btn {
    width: 100%;
  }

  .form-actions {
    margin-top: 2rem;
    display: flex;
    justify-content: space-between;
  }

  input {
    height: 2rem;
  }

  .register-tip {
    display: flex;
    justify-content: flex-start;
    margin-top: 10px;
    // padding-right:70px;
    height: 1rem;
  }


  .ac {
    padding-right: 70px;
  }

  .reg {
    padding-left: 80px;
  }

  // 响应式处理
  @media (max-width: 1024px) {
    grid-template-columns: 1fr;
    background: linear-gradient(to bottom, #f5f5f5 40%, #D2B48C 60%);

    .illustration-section {
      justify-content: center;
      padding: 2rem 0;

      .illustration-image {
        max-height: 400px;
      }
    }
  }
}
.footer {
  position: fixed; /* 固定定位 */
  bottom: 0; /* 距离视口底部为 0 */
  left: 50%; /* 水平方向居中 */
  transform: translateX(-50%); /* 微调以确保完全居中 */
  font-size: 14px;
  display: flex;
  flex-direction: row; /* 水平排列 */
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%; /* 确保宽度占满整个视口 */
  box-sizing: border-box; /* 避免宽度计算问题 */
}
// 备案号样式
.beian-footer {
  bottom: 0;
  text-align: center;

  a {
    color: #1D1D26;
    font-size: 14px;
    text-decoration-line: underline;

    &:hover {
      color: #409EFF;
    }
  }
}

</style>